<template>
	<view class="viewport">
		<view class="bgAnim">
			<image src="https://s1.mi.com/m/appdownload/static/img/7.5149db7.jpg"></image>
		</view>
		<view class="content">
			<view class="btn">
				<view class="alink">
					<view class="box">
						<text>点击前往 App Store 下载</text>
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
	}
</script>

<style lang="scss" scoped>
	view {
		line-height: 1.15;
	}

	.viewport {
		max-width: 7.2rem;
		margin: 0 auto;
		position: relative;
		width: 100%;
		height: 100vh;
		overflow: hidden;
	}

	.bgAnim {

		image {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: -1;
		}

	}

	.content {
		height: 7.3rem;
		position: absolute;
		z-index: 10;
		top: 50%;
		left: 0;
		right: 0;
		transform: translate3d(0, -50%, 0);

		.app-btn {
			position: absolute;
			bottom: 0;
			left: 50%;
			z-index: 999;
			width: 5.5rem;
			background-color: rgb(255, 255, 255);
			color: rgb(239, 110, 79);
			margin-left: -3.5rem;
			border-radius: 0.96rem;
			text-align: center;
			font-size: 1.2rem;
			padding: .4rem .8rem;
		}

		.btn {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 5rem;
			margin-left: -2.5rem;

			.alink {
				border-radius: 0.96rem;
				overflow: hidden;
				display: box;
				display: -webkit-box;
				box-pack: center;
				display: -ms-flexbox;
				display: flex;
				align-items: center;
				justify-content: center;
				margin: 0.3rem auto 0;
				width: 4rem;

				.box {
					display: block;
					-webkit-box-flex: 1;
					-ms-flex: 1;
					flex: 1;
					text-align: center;
					background-color: rgb(255, 255, 255);
					color: rgb(239, 110, 79);
					white-space: nowrap;
					font-size: .3rem;
					line-height: .8rem;

					text {}
				}
			}
		}
	}
</style>